<template>
  <div style="width: 100%;" class="mt24">
    <t-form :data="formData" :rules="rules" ref="form" label-align="top">
      <t-form-item label="产品名称" name="title">
        <t-input v-model="formData.title" placeholder="请输入产品名称"></t-input>
      </t-form-item>
      <t-form-item label="产品分类" name="classify_id">
        <t-cascader v-model="formData.classify_id" :options="classifyOptions" placeholder="请选择产品分类"></t-cascader>
      </t-form-item>
      <t-form-item label="单位" name="unit_id">
        <t-select v-model="formData.unit_id" :options="unitOptions" placeholder="请选择单位"></t-select>
      </t-form-item>
      <!--<t-form-item label="售价" name="selling_price">-->
      <!--  <t-input label="￥" v-model="formData.selling_price" placeholder="请输入售价"></t-input>-->
      <!--</t-form-item>-->
      <t-form-item label="EAN条形码" name="ean">
        <t-input v-model="formData.ean" placeholder="请输入EAN条形码"></t-input>
      </t-form-item>
      <t-form-item label="UPC条形码" name="upc">
        <t-input v-model="formData.upc" placeholder="请输入UPC条形码"></t-input>
      </t-form-item>
      <t-form-item label="缩略图" name="thumb">
        <upload-img module="product" :value="formData.thumb ? [{url: formData.thumb}] : []" @success="handleSuccess($event, 'thumb')" @remove="handleRemove($event, 'thumb')"></upload-img>
      </t-form-item>
      <!--<t-form-item label="产品品牌" name="brand_id">-->
      <!--  <t-select v-model="formData.brand_id" :options="brandOptions" placeholder="请选择产品品牌"></t-select>-->
      <!--</t-form-item>-->
      <!--<t-form-item label="产品名称（短标题）" name="name">-->
      <!--  <t-input v-model="formData.name" placeholder="请输入产品名称（短标题）"></t-input>-->
      <!--</t-form-item>-->
      <!--<t-form-item label="产品编号" name="sn">-->
      <!--  <t-input v-model="formData.sn" placeholder="请输入产品编码"></t-input>-->
      <!--</t-form-item>-->
      <!--<t-form-item label="排序" name="sort">-->
      <!--  <t-input-number v-model="formData.sort" style="width: 220px;" placeholder="输入排序"></t-input-number>-->
      <!--</t-form-item>-->
      <!--<t-form-item label="状态" name="status">-->
      <!--  <t-radio-group v-model="formData.status" :options="statusOptions"></t-radio-group>-->
      <!--</t-form-item>-->
    </t-form>
  </div>
</template>

<script>
import UploadImg from '@/components/upload-img/index.vue';
import {classifyListApi} from "@/api/classify";

export default {
  name: 'BaseInfo',
  components: {
    UploadImg,
  },
  props: {
    product: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      formData: {
        //brand_id: '', // 品牌
        classify_id: '', // 分类
        title: '', // 标题
        unit_id: '', // 单位
        //selling_price: '', // 售价
        ean: '', // EAN条形码
        upc: '', // UPC条形码
        thumb: '', // 缩略图
        //name: '', // 名称
        //sn: '', // 编号
        sort: 999, // 排序
        //status: 1, // 状态
      },
      rules: {
        brand_id: [{ required: true, message: '请选择产品品牌', trigger: 'change' },],
        classify_id: [{ required: true, message: '请选择产品分类', trigger: 'change' },],
        title: [{ required: true, message: '请输入产品名称', trigger: 'blur' },],
        //name: [{ required: true, message: '请输入产品名称（短标题）', trigger: 'blur' },],
        //sn: [{ required: true, message: '请输入产品编号', trigger: 'blur' },],
        sort: [{ required: true, message: '请输入排序', trigger: 'blur' },],
        status: [{ required: true, message: '请选择状态', trigger: 'change' },],
      },
      brandOptions: [], // 品牌
      classifyOptions: [],  // 分类
      unitOptions: [],  // 单位
      statusOptions: [
        //（-1 作废；0 下架；1 上架）
        { label: '上架', value: 1 },
        { label: '下架', value: 0 },
        { label: '作废', value: -1 },
      ],
    }
  },
  mounted() {
    this.getClassifyList()
  },
  methods: {
    // 上传缩略图
    handleSuccess(files, key) {
      if (key === 'images_data') {
        this.formData.images_data = files.fileList.map(item => ({url: item.url}))
      } else {
        this.formData[key] = files.response.url
      }
    },
    handleRemove(files, key) {
      this.formData[key] = ''
    },
    reset() {
      this.formData = {
        //brand_id: data.brand_id, // 品牌
        classify_id: '', // 分类
        title: '', // 标题
        unit_id: '', // 单位
        //selling_price: data.selling_price, // 售价
        ean: '', // EAN条形码
        upc: '', // UPC条形码
        thumb: '', // 缩略图
        //name: data.name, // 名称
        //sn: data.sn, // 编号
        sort: 999, // 排序
        //status: data.status, // 状态
      }
      this.$refs.form.reset()
    },
    // 提交
    submit() {
      return this.$refs.form.validate()
    },
    // 获取 分类 | 品牌 | 单位
    getClassifyList() {
      const params1 = {
        page: 1,  // 当前页
        limit: 9999,  // 每页条数
        belong_module: '', // 模块类型（如产品分类 product_classify，品牌 product_brand，发货说明 product_deliver，保障说明 product_safeguard ...）
      }
      classifyListApi({...params1, belong_module: 'product_classify'}).then(res=> {
        //this.classifyOptions = res.data.map(item=> ({ label: item.title, value: item.id }))
        let lists = res.data.map(item=> {
          return {
            label: item.title,
            value: item.id,
            id: item.id,
            pid: item.pid,
          }
        })
        const hierarchy = this.buildHierarchyRecursive(lists)
        this.classifyOptions = hierarchy
      }).catch(err=> {
        console.log('err', err)
      })
      classifyListApi({...params1, belong_module: 'product_brand'}).then(res=> {
        this.brandOptions = res.data.map(item=> ({ label: item.title, value: item.id }))
      }).catch(err=> {
        console.log('err', err)
      })
      classifyListApi({...params1, belong_module: 'product_unit'}).then(res=> {
        this.unitOptions = res.data.map(item=> ({ label: item.title, value: item.id }))
      }).catch(err=> {
        console.log('err', err)
      })
    },
    buildHierarchyRecursive(data, pid = 0) {
      return data
        .filter(item => item.pid === pid)
        .map(item => ({
          ...item,
          children: this.buildHierarchyRecursive(data, item.id)
        }));
    },
  }
}
</script>

<style lang="less" scoped>

</style>
